<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>消息详情 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="notifications.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">消息详情</h1>
    </div>

    <!-- Notification Detail -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4 mb-4">
        <!-- Notification Header -->
        <div class="flex items-start mb-4 pb-4 border-b border-gray-100">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                <i class="fas fa-clipboard-check text-blue-600 text-2xl"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-lg font-bold text-gray-900">审批通知</span>
                    <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">未读</span>
                </div>
                <div class="text-sm text-gray-500">2024-01-15 14:30</div>
            </div>
        </div>

        <!-- Notification Content -->
        <div class="mb-4">
            <div class="text-base text-gray-800 mb-3 leading-relaxed">
                您有新的采购申请待审批，请及时处理。
            </div>
            
            <!-- Related Info -->
            <div class="bg-blue-50 rounded-lg p-4 mb-4">
                <div class="text-sm font-semibold text-gray-800 mb-3 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    申请详情
                </div>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">申请类型</span>
                        <span class="text-gray-800 font-semibold">采购申请</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">申请单号</span>
                        <span class="text-gray-800 font-semibold">CG20240115001</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">材料名称</span>
                        <span class="text-gray-800 font-semibold">消防栓</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">采购金额</span>
                        <span class="text-red-600 font-bold">¥50,000.00</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">发起人</span>
                        <span class="text-gray-800 font-semibold">王工</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">关联项目</span>
                        <span class="text-gray-800 font-semibold">消防工程A项目</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">紧急程度</span>
                        <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded">紧急</span>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="space-y-3">
                <a href="approval-detail.html" class="block w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-xl font-semibold text-center shadow-lg">
                    <i class="fas fa-clipboard-check mr-2"></i>
                    立即审批
                </a>
                <button class="block w-full bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold">
                    <i class="fas fa-eye mr-2"></i>
                    查看详情
                </button>
            </div>
        </div>
    </div>

    <!-- Other Notifications -->
    <div class="bg-white mx-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-list text-blue-500 mr-2"></i>
            相关消息
        </div>
        <div class="space-y-3">
            <a href="notification-detail.html" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center flex-1 min-w-0">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-check-circle text-orange-600"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-gray-800 mb-1">审批结果</div>
                        <div class="text-xs text-gray-500">您的材料申领申请已通过审批</div>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-300 ml-2"></i>
            </a>
            <a href="notification-detail.html" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center flex-1 min-w-0">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fas fa-box text-green-600"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-semibold text-gray-800 mb-1">库存预警</div>
                        <div class="text-xs text-gray-500">灭火器库存不足，请及时采购</div>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-300 ml-2"></i>
            </a>
        </div>
    </div>

    <!-- Delete Button -->
    <div class="px-4 mt-6 mb-6">
        <button onclick="deleteNotification()" class="w-full bg-white text-red-600 py-3 rounded-xl font-semibold shadow-sm border border-red-200">
            <i class="fas fa-trash-alt mr-2"></i>
            删除消息
        </button>
    </div>

    <script>
        function deleteNotification() {
            if (confirm('确定要删除这条消息吗？')) {
                // Delete notification logic
                alert('消息已删除');
                window.location.href = 'notifications.html';
            }
        }
    </script>
</body>
</html>

